<template>
  <!--证件类型模板新增 -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-form
      ref="addForm"
      class="dialog-form"
      :model="formData"
      :rules="rules"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证书名称" prop="certificateName">
            <el-input v-model="formData.certificateName" placeholder="请输入证书名称" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="orderNum">
            <label slot="label" v-html="`排&emsp;&emsp;序`" />
            <el-input-number
              v-model="formData.orderNum"
              size="medium"
              style="width: 100%"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="remark">
            <label slot="label" v-html="`备&emsp;&emsp;注`" />
            <el-input v-model="formData.remark" type="textarea" :rows="3" :maxlength="500" placeholder="" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="证书附件" prop="appFiles">
            <img-uplode
              ref="fileUplode"
              :edit-file-list="filePicList"
              @getFileIdsList="getFilePic"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <detailList ref="detailList" :table-data.sync="detailList" @getTableFormData="getTableDetailList" />
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
  <!--试验单位信息新增弹层end -->
</template>

<script>
// 明细
import detailList from './detailList'
// 页面组件- 附件上传
import ImgUplode from '@/components/Upload/ImgUplode'
// dialog-footer
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
// 接口
import { addCertificateType, editCertificateType, getMaxNum, detailCertificateType } from '@/api/superviseBaseInfo/typeConfig/certTypeTemplate'
export default {
  components: {
    DialogFooter,
    ImgUplode,
    detailList
  },
  data() {
    return {
      certificateEnList: [],
      /* 图片上传 start*/
      filePicList: [], // 上传附件
      /* 图片上传 end*/

      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: {
        certificateName: '', // 证件名称
        remark: '', // 备注
        appFiles: '', // 附件id
        typeId: '',
        detailList: [] // 字段明细
      },
      detailList: [], // 明细
      // 表单验证规则
      rules: {
        certificateName: [
          { required: true, message: '证书名称不能为空', pattern: '[^\x22]+', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        appFiles: [
          { required: true, message: '证书附件不能为空', trigger: 'change' }
        ]
      }
      /* 新增 end*/
    }
  },
  methods: {
    /* 新增/编辑弹层 start*/
    // 新增/编辑
    handleAdd(title, id, typeId) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.formData.typeId = typeId
      this.emptyAddForm() // 清空
      if (id) {
        this.getDetailById(id)
      } else {
        this.getMaxNum(typeId)
      }
    },
    async getMaxNum(typeId) {
      const { data } = await getMaxNum(typeId)
      this.formData.orderNum = data
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailCertificateType(id)
      this.formData = { ...data }
      this.detailList = data.detailList
      // 处理文件回显
      if (data.appFiles && data.appFiles.length) {
        this.filePicList = data.appFiles
      }
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.$refs.detailList.addDis = false
      this.emptyAddForm()
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          this.btnDisabled = true
          this.formData.detailList = this.checkEditState(this.detailList)
          if (!this.formData.detailList) return
          if (this.formData.id) {
            // 更新
            await editCertificateType(this.formData)
            this.msgSuccess('修改成功')
            this.cancel()
            this.$parent.getList()
          } else {
            await addCertificateType(this.formData)
            this.msgSuccess('保存成功')
            this.cancel()
            this.$parent.getList()
          }
        }
      })
    },
    // 判断明细否处在编辑状态
    checkEditState(tableFormData) {
      if (tableFormData && tableFormData.length > 0) {
        for (let i = 0; i < tableFormData.length; i++) {
          if (tableFormData[i].action === 'add' || tableFormData[i].action === 'edit') {
            this.msgInfo('请先保存正在编辑的数据')
            return false
          }
        }
        return tableFormData
      } else {
        this.msgInfo('请填写具体的字段')
        return false
      }
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.id = ''
      this.filePicList = []
      this.detailList = []
      this.formData.detailList = []
      this.formData.appFiles = []
    },
    // 接受文件上传 组件 回传过来的文件id
    getFilePic(fileIdsList, deleteFileIds, newFileList) {
      this.formData.appFiles = newFileList
    },
    // 证件模板明细
    getTableDetailList(tableFormData) {
      this.detailList = tableFormData
      console.log(tableFormData)
    }
    /* 新增弹层 end*/
  }

}
</script>

<style>

</style>
